<template lang="html">
  <div>
    <div class="mt-meal-item" v-for="(item, index) in list" :key="item.id">
      <div data-flex="main-between" class="mb15 f30">
        <h3 class="n">{{item.name}}</h3>
        <p class="c-rd f32">￥{{item.price | formatPrice}}</p>
      </div>
      <div>
        <div class="icon-gender" :class="item.gender ? 'woman':'man'">
          <i class="iconfont l">{{item.gender ? '&#xe65a;':'&#xe659;'}}</i>
          <span class="gender-txt">{{item.gender ? '女':'男'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    required: true,
  }
}
</script>

<style lang="less">
.mt-meal-item{
  padding: 20px 30px;
  border-bottom: 1Px solid #ddd;
  background: #fff;
  .icon-gender {
    padding: 1Px;
    border-radius: 2Px;
    width: 80px;
    .iconfont{
      font-size: 30px;
      background: #fff;
      width: 39px;
      text-align: center;
    }
    .gender-txt{
      color:#fff;
    }
    &.man{
      color:#87d9f7;
      border-color:#87d9f7;
      background-color: #87d9f7;
    }
    &.woman{
      color:#edb8d7;
      border-color:#edb8d7;
      background-color: #edb8d7;
    }
  }
}
</style>
